/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import "@/assets/styles/variables.less";

.aside-east {
	position: absolute;
	top: @headerHeight;
	right: 0;
	width: @propertiesWidth;
	bottom: 0;
	z-index: 13;
	background-color: @bgColor;
	color: @textColor;
	transition: all 0.3s;
	border-left: 1px solid #d2d1d1;

	.aside-east__container {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
	}
}

.conf-header {
	position: relative;
	height: 36px;
	background-color: #fcfcfd;
	color: @primaryTextColor;
	border-bottom: 1px solid #e7e7e7;

	.conf-header__tabs {
		position: absolute;
		right: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 1;

		.conf-header__tabs-item {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			cursor: pointer;
			// width: 33.33%;
			width: 50%;
			font-size: 12px;

			&.active {
				&::after {
					content: "";
					position: absolute;
					left: 0;
					bottom: -1px;
					height: 2px;
					width: 100%;
					background-color: #0070cc;
				}
			}
		}
	}
}

.conf-main {
	position: absolute;
	top: 36px;
	left: 0;
	right: 0;
	bottom: 0;
}

.conf-main {
	.data-conf {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: auto;
		padding: 8px;

		.ds-conf {
			position: relative;
			width: 100%;

			.ds-select-area {
				position: relative;
				width: 100%;
			}

			.ds-sql-area {
				position: relative;
				width: 100%;
				margin-top: 10px;
			}
		}

		.ds-data-table {
			position: relative;
			width: 100%;
			height: auto;
			max-height: 360px;
			margin-top: 10px;
			overflow: auto;
			// border: 1px solid #000;
			border: 1px solid #e7e7e7;

			.sticky-table-table {
				width: 100%;
			}
		}
	}
}

// .Grid,
// .List {
//   overflow: hidden;
// }

// .Cell {
//   display: inline-block;
//   box-sizing: border-box;
//   width: 150px;
//   height: 32px;
//   // border: 1px solid black;
// 	border-bottom: 1px solid #000;
// 	border-right: 1px solid #000;
//   vertical-align: top;
//   // padding: 10px;

// 	&:last-child {
// 		border-right: none;
// 	}
// }

// .Grid .Cell {
//   background-color: lightgray;
//   font-weight: bold;
// 	border-bottom: 1px solid #000;
// 	border-right: 1px solid #000;
// 	word-break: break-all;

// 	&:last-child {
// 		border-right: none;
// 	}

// }

// .List .Cell {
// 	word-break: break-all;
// }

// .List .ListItemOdd {
//   background-color: #f5f5f5;

// 	&:last-child {
// 		.Cell {
// 			border-bottom: none;
// 		}
// 	}
// }

// .List .ListItemEven {
//   background-color: #ffffff;

// 	&:last-child {
// 		.Cell {
// 			border-bottom: none;
// 		}
// 	}
// }
